<template>
  <div class="list-wrapper" style="margin-top: 20px">
    <el-table :data="list" style="width: 100%" :height="height">
      <el-table-column prop="name" label="商品信息" width="500">
        <template v-if="scope.row.orders.length" slot-scope="scope">
          <div v-if="showFirTitle(scope.$index)" class="secTitle">
            <p>拼团号:{{ scope.row.team_no }}</p>
            <p style="margin-left: 5px">{{ scope.row.desc }}</p>
          </div>
          <div v-if="scope.row.orders.length === 1">
            <template v-for="item of scope.row.orders" v-if="showSecTitle(scope.$index)">
              <div class="secTitle">
                <p>订单号:{{ item.order_no }}</p>
                <p style="margin-left: 5px">下单时间：{{ item.created_at }}</p>
              </div>
            </template>
            <template v-for="item of scope.row.orders" v-if="showThirdTitle(scope.$index)">
              <div v-for="(secItem, index) of item.commodity"  class="secTitle">
                <el-avatar :size="80" :src="secItem.img" shape="square" />
                <div class="text" style="width: 250px">
                  <p>{{ secItem.name }}</p>
                  <p>{{ '单价：' + secItem.price + '￥' }}</p>
                </div>
              </div>
            </template>
          </div>
          <div v-else>
            <template v-for="item of scope.row.orders" v-if="showSecTitle(scope.$index)">
              <div class="secTitle">
                <p>订单号:{{ item.order_no }}</p>
                <p style="margin-left: 5px">下单时间：{{ item.created_at }}</p>
              </div>
              <div v-for="(secItem, index) of item.commodity"  class="secTitle">
                <el-avatar :size="80" :src="secItem.img" shape="square" />
                <div class="text" style="width: 250px">
                  <p>{{ secItem.name }}</p>
                  <p>{{ '单价：' + secItem.price + '￥' }}</p>
                </div>
              </div>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="规格">
        <template v-if="scope.row.orders.length" slot-scope="scope">
          <div v-if="scope.row.orders.length === 1">
            <div v-if="showFirTitle(scope.$index)" />
            <div v-if="showSecTitle(scope.$index)" />
            <template v-for="item of scope.row.orders" v-if="showThirdTitle(scope.$index)">
              <div
                v-for="(secItem, index) of item.commodity"
                class="secTitle"
              >{{ secItem.spec }}</div>
            </template>
          </div>
          <div v-else>
            <template v-for="item of scope.row.orders" v-if="showSecTitle(scope.$index)">
              <div
                v-for="(secItem, index) of item.commodity"
                class="secTitle"
                style="line-height:150px"
              >{{ secItem.spec }}</div>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="pay" label="状态" width>
        <template v-if="scope.row.orders.length" slot-scope="scope">
          <div v-if="scope.row.orders.length === 1">
            <div v-if="showFirTitle(scope.$index)" />
            <div v-if="showSecTitle(scope.$index)" />
            <template
              v-for="item of scope.row.orders"
              v-if="showThirdTitle(scope.$index)"
            >{{ item.status === 0 ? '待付款' : item.status === 2 ? '待发货' : item.status === 3 ? '待收货' : item.status === 1 ? '交易完成' : '交易关闭' }}</template>
          </div>
          <div v-else>
            <template v-for="item of scope.row.orders" v-if="showSecTitle(scope.$index)">
              <div
                style="line-height: 150px"
              >{{ item.status === 0 ? '待付款' : item.status === 2 ? '待发货' : item.status === 3 ? '待收货' : item.status === 1 ? '交易完成' : '交易关闭' }}</div>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="支付信息" width="150">
        <template v-if="scope.row.orders.length" slot-scope="scope">
          <div v-if="scope.row.orders.length === 1">
            <div v-if="showFirTitle(scope.$index)" />
            <div v-if="showSecTitle(scope.$index)" />
            <template v-for="item of scope.row.orders" v-if="showThirdTitle(scope.$index)">
              <div v-for="(secItem, index) of item.commodity">
                <p>订单总额：￥ {{ parseInt(secItem.payment) + parseInt(secItem.freight) }}</p>
                <p>实付总额：￥ {{ parseInt(secItem.payment) + parseInt(secItem.freight) }}</p>
              </div>
            </template>
          </div>
          <div v-else>
            <template v-for="item of scope.row.orders" v-if="showSecTitle(scope.$index)">
              <div v-for="(secItem, index) of item.commodity" style="height:125px" class="d-flex-c">
                <div>
                  <p>订单总额：￥ {{ parseInt(secItem.payment) + parseInt(secItem.freight) }}</p>
                  <p>实付总额：￥ {{ parseInt(secItem.payment) + parseInt(secItem.freight) }}</p>
                </div>
              </div>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="assistant" label="下单人" width="400">
        <template v-if="scope.row.orders.length" slot-scope="scope">
          <div v-if="scope.row.orders.length === 1">
            <div v-if="showFirTitle(scope.$index)" />
            <div v-if="showSecTitle(scope.$index)" />
            <template v-for="item of scope.row.orders" v-if="showThirdTitle(scope.$index)">
              <p style="white-space: nowrap">{{ '收货人：' + item.user.nickname + ' / ' + item.mobile }}</p>
              <p>{{ item.city_str + ' ' + item.detail }}</p>
              <p>备注：{{ item.remark ? item.remark : '暂无备注' }}</p>
            </template>
          </div>
          <div v-else>
            <template v-for="item of scope.row.orders" v-if="showSecTitle(scope.$index)">
              <p style="white-space: nowrap">{{ '收货人：' + item.user.nickname + ' / ' + item.mobile }}</p>
              <p>{{ item.city_str + ' ' + item.detail }}</p>
              <p>备注：{{ item.remark ? item.remark : '暂无备注' }}</p>
            </template>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column  label="订单备注:" width="200">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else>
            <span style="padding: 0 15px; color: #409EFF; cursor: pointer;" @click="viewRemark(scope)">备注</span>
          </div>
        </template>
      </el-table-column>-->
      <el-table-column label="操作" width="300">
        <template v-if="scope.row.orders.length" slot-scope="scope">
          <div v-if="scope.row.orders.length === 1">
            <div v-if="showFirTitle(scope.$index)" />
            <div v-if="showSecTitle(scope.$index)" />
            <template v-for="item of scope.row.orders" v-if="showThirdTitle(scope.$index)">
              <div v-for="(secItem, index) of item.commodity" >
                <div class="d-flex">
                  <span
                    v-if="secItem.status === 2"
                    style="padding: 0 20px; color: #409EFF;"
                    @click="deliverClick(secItem)"
                  >发货</span>
                  <span
                    v-if="showAmend(secItem)"
                    style="padding: 0 20px; color: #409EFF;"
                    @click="amendStatusClick(secItem, item)"
                  >修改状态</span>
                </div>
                <div class="d-flex">
                  <span
                    v-if="secItem.status !== -1"
                    style="padding: 0 20px; color: #F56C6C; white-space: nowrap"
                    @click="closeOrder(item)"
                  >关闭订单</span>
                  <span
                    style="padding: 0 20px; color: #1BAAB0;"
                    class="detail"
                    @click="detail(item)"
                  >订单详情</span>
                </div>
              </div>
            </template>
          </div>
          <div v-else>
            <template v-for="item of scope.row.orders" v-if="showSecTitle(scope.$index)">
              <div v-for="(secItem, index) of item.commodity" style="height: 120px">
                <div class="d-flex">
                  <span
                    v-if="secItem.status === 2"
                    style="padding: 0 20px; color: #409EFF;"
                    @click="deliverClick(secItem)"
                  >发货</span>
                  <span
                    v-if="showAmend(secItem)"
                    style="padding: 0 20px; color: #409EFF;"
                    @click="amendStatusClick(secItem, item)"
                  >修改状态</span>
                </div>
                <div class="d-flex">
                  <span
                    v-if="secItem.status !== -1"
                    style="padding: 0 20px; color: #F56C6C; white-space: nowrap"
                    @click="closeOrder(item)"
                  >关闭订单</span>
                  <span
                    style="padding: 0 20px; color: #1BAAB0;"
                    class="detail"
                    @click="detail(item)"
                  >订单详情</span>
                </div>
              </div>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <order-detail
      :order-detail="orderDetail"
      :dialog-visible="dialogVisible"
      @closeDialog="handleCloseDialog"
    />
    <Remark ref="remark" @confirm="handleRemarkConfirm" />
    <Deliver :id="id" ref="deliver" @success="handleSuccess" />
    <AmendOrder ref="amendOrder" :status-name="statusName" @confirm="handleConfirm" />
  </div>
</template>
<script>
import OrderDetail from './orderDetail'
import { closeSeckillOrder, amendSeckillStatus } from '@/api/seckill'
import Remark from './remark'
import Deliver from './deliver'
import AmendOrder from './amendOrder'
const ERR_OK = 200
export default {
  components: {
    OrderDetail,
    Remark,
    Deliver,
    AmendOrder
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    status: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      dialogVisible: false,
      orderDetail: {},
      height: 0,
      id: '',
      statusName: '',
      order_no: '',
      commodityIndex: 0
    }
  },
  computed: {
    setStatusName() {
      return this.status === 2 ? '实付款' : '待付款'
    }
  },
  created() {
    this.initHeight()
  },
  methods: {
    handleConfirm(orderStatus) {
      this._amendSeckillStatus({
        order_no: this.order_no,
        order_status: orderStatus
      })
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    showAmend(secItem) {
      if (
        secItem.status === 4 ||
        secItem.status === 5 ||
        secItem.status === -1
      ) {
        return false
      } else {
        return true
      }
    },
    amendStatusClick(secItem, item) {
      this.$refs.amendOrder.show()
      this.id = secItem.id
      this.order_no = item.order_no
      switch (secItem.status) {
        case 2:
          this.statusName = 'delivery'
          break
        case 0:
          this.statusName = 'payment'
          break
        case 3:
          this.statusName = 'receipt'
          break
      }
    },
    closeOrder(item) {
      this.$refs.remark.show()
      this.order_no = item.order_no
      // this.$confirm('确认关闭订单吗？')
      //   .then(_ => {
      //     this._closeSeckillOrder(scope.row.id)
      //       .then(() => {
      //         this.$emit('success')
      //       })
      //       .catch(err => {
      //         console.log(err)
      //       })
      //   })
      //   .catch(_ => {})
    },
    handleRemarkConfirm(remark) {
      // this._setRemark({ id: this.id, message: remark })
      this._closeSeckillOrder({ order_no: this.order_no, remark })
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleSuccess() {
      this.$emit('success')
    },
    deliverClick(secItem) {
      this.$refs.deliver.show()
      this.id = secItem.id
    },
    // viewRemark(scope) {
    //   this.$refs.remark.show()
    //   // this.remark = scope.row.message
    //   // this.id = scope.row.id
    // },
    detail(item) {
      // console.log(scope, 'scope')
      this.dialogVisible = true
      this.orderDetail = item
      // this._getOrderDetail(scope.row.id)
    },

    showFirTitle(index) {
      return index % 3 === 0
    },
    showSecTitle(index) {
      if (index % 3 === 0) {
        return false
      }
      return (index + 2) % 3 === 0
    },
    showThirdTitle(index) {
      if (index % 3 === 0 || (index + 2) % 3 === 0) {
        return false
      }
      return (index + 1) % 3 === 0
    },
    handleCloseDialog() {
      this.dialogVisible = false
    },
    // _getOrderDetail(id) {
    //   getOrderDetail(id)
    //     .then(res => {
    //       if (res.code === ERR_OK) {
    //         console.log(res)
    //         this.orderDetail = res.data
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    _closeSeckillOrder({ order_no, remark }) {
      return closeSeckillOrder({ order_no, remark })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              type: 'success'
            })
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    _amendSeckillStatus({ order_no, order_status }) {
      return amendSeckillStatus({ order_no, order_status })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // _setRemark({ id, message }) {
    //   setRemark({ id, message })
    //     .then(res => {
    //       if (res.code === ERR_OK) {
    //         console.log(res)
    //         this.$message({
    //           message: res.message,
    //           type: 'success'
    //         })
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    // _amendOrderStatus({ id, myType }) {
    //   return amendOrderStatus({ id, myType })
    //     .then(res => {
    //       if (res.code === ERR_OK) {
    //         console.log(res)
    //         this.$message({
    //           message: res.message,
    //           type: 'success',
    //           showClose: true
    //         })
    //         return Promise.resolve(res)
    //       }
    //     })
    //     .catch(err => {
    //       console.lgo(err)
    //       return Promise.reject(err)
    //     })
    // },
    initHeight() {
      this.height = document.body.clientHeight - 350
      window.onresize = () => {
        this.height = document.body.clientHeight - 350
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.d-flex-c{
  display: flex;
  align-content: center;
}
.el-table /deep/ .cell {
  .detail {
    color: #1baab0;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell {
  &:nth-child(1) {
    // display: flex;
    // align-items: center;
    // justify-content: space-around;
  }
  .el-avatar {
    margin-right: 15px;
  }
}
.el-table /deep/ .el-table__row:nth-child(odd) {
  td {
    height: 20px;
    padding: 0;
    background: #fafafa;
  }
}
.el-table /deep/ .el-table__row {
  td {
    height: auto !important;
  }
}
.secTitle {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  p {
  }
}
.shop-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.d-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  span {
    display: inline-block;
    width: 120px;
    text-align: left;
  }
}
</style>
